<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RINT 数据分享平台</title>
    <link href="/static/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="/static/style.css" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">RINT 数据分享平台</a>
            <div class="navbar-nav ms-auto" id="navbarNav">
                <!-- Navigation will be updated by JavaScript based on authentication state -->
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <div class="row">
            <div class="col-md-8 mx-auto text-center">
                <h1 class="display-4">RINT 数据分享平台</h1>
                <p class="lead">A DVC-based platform for data collection and sharing</p>
                <div class="mt-5">
                    <div class="row justify-content-center">
                        <div id="authButtons" class="col-auto">
                            <!-- Auth buttons will be inserted by JavaScript -->
                        </div>
                    </div>

                </div>
            </div>
        </div>
        
        <!-- Dashboard Button Section (shown only when logged in) -->
        <div class="row mt-4" id="dashboardButtonSection" style="display: none;">
            <div class="col-md-12 text-center">
                <a href="/dashboard" class="btn btn-success btn-lg px-5">进入数据仓库</a>
            </div>
        </div>
        
        <!-- Usage Documentation Section -->
        <div class="row mt-5">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h2>使用说明</h2>
                    </div>
                    <div class="card-body">
                        <h3>系统概述</h3>
                        <p>RINT 数据分享平台将下面两种使用和分享数据的方式整合在了一起：</p>
                        <ul>
                            <li><strong>通过 Web 页面手工管理的数据文件</strong>：通过浏览器界面进行数据上传和下载</li>
                            <li><strong>Git + DVC 管理的数据文件</strong>：通过 DVC 命令行（或 VS Code 插件）进行数据版本控制和同步</li>
                        </ul>
                        
                        <h4>准备工作</h4>
                        <p>在首页注册并登录账户就可以通过 Web 页面上传、下载数据文件啦。</p>
                        <p>如果需要在源码项目中使用 DVC 管理数据文件，请创建文件 ~/.config/dvc/config:
                        <pre><code>[core]
remote = myremote
['remote "myremote"']
    url = <span id="dvcRemoteUrl">加载中...</span>
    auth = basic
    user = &lt;registered-email&gt;
    password = &lt;registered-password&gt;
                              </code></pre>
                        其中 &lt;registered-email&gt; 和 &lt;registered-password&gt; 是前面注册的 Email 和密码。
                        <p>在 Windows 系统上，这个配置文件的位置为：%LocalAppData%\iterative\dvc\config。</p>
                        <p>这里的注册、配置都是一次性工作，不需要为每个项目单独设置。</p>
                        
                        <h3>Web 页面通道</h3>
                        <p>登录系统后，在数据仓库页面按照提示上传/下载数据（包括文件和文件夹）。</p>
                        
                        <h3>DVC 通道</h3>
                        <h4>下载数据</h4>
                        <pre><code>git clone &lt;your-project&gt;
dvc pull</code></pre>

                        <h4>上传数据</h4>
                        <p>Git + DVC 上传数据工作流：</p>
                        <pre><code># 添加数据到 DVC
dvc add &lt;data-file-or-folder&gt;

# 提交更改到 Git
git add &lt;your-data-file.dvc&gt;
git commit -m "Add data via DVC"

# 推送数据到远程存储
dvc push
git push</code></pre>
                        
                        <h3>常见问题</h3>
                        <h4>Q: 我使用的 Linux 服务器没安装 DVC？</h4>
                        <p>A: 通知系统管理员安装，也可以在用户级用 pipx, mise 等工具安装 DVC。</p>

                        <h4>Q: Winodws 系统可以使用 DVC 吗？</h4>
                        <p>A: 可以，下载安装包安装即可。</p>

                        <h4>Q: 怎样在代码库里使用别人分享的数据？</h4>
                        <p>A: 最常见的情况是数据对应的 .dvc 文件已经在代码库里，只要 clone 代码库然后执行 `dvc pull`，所有数据就下载到正确的位置上了。
                        <p>如果要用的数据还没有对应的 .dvc 文件，可以从 Web 页面上下载这个 .dvc 文件到代码库里，然后 `dvc pull`。</p></p>

                        <h4>Q: 收集的数据文件想上传到平台上，用 Web 还是 DVC 方式好？</h4>
                        <p>A: 推荐使用 Web 界面上传，完整填写各项字段，方便自己和他人使用。</p>

                        <h4>Q: 我能通过 DVC 上传、下载文件，但在 Web 界面显示的文件名不正确。</h4>
                        <p>A: 通知管理员检查元数据收集模块。</p>

                        <h4>Q: 已上传数据各项特征值还能修改吗？</h4>
                        <p>A: 目前还不能，后续版本会增加特征编辑功能。</p>

                        <h4>Q: 上传数据窗口里面的 父级项目 一栏是做什么用的？</h4>
                        <p>A: 这项用来构建数据文件之间的关系，以构建数据谱系图，目前忽略它即可。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
        
    <script src="/static/bootstrap/bootstrap.bundle.min.js"></script>
    <script>
        let authToken = localStorage.getItem('token');
        let currentUser = null;

        async function loadCurrentUser() {
            try {
                // Try server-side authentication first if no token
                if (!authToken) {
                    const serverResponse = await fetch('/api/user-info');
                    if (serverResponse.ok) {
                        currentUser = await serverResponse.json();
                        return;
                    }
                }
                
                // Fall back to token-based authentication
                const response = await fetch('/api/user-info', {
                    headers: authToken ? {
                        'Authorization': `Bearer ${authToken}`
                    } : {}
                });
                
                if (response.ok) {
                    currentUser = await response.json();
                    
                    // Store the token if we got a successful response without one
                    if (!authToken && response.headers.get('Authorization')) {
                        authToken = response.headers.get('Authorization').replace('Bearer ', '');
                        localStorage.setItem('token', authToken);
                    }
                } else {
                    // If token is invalid, clear it and continue as unauthenticated
                    if (authToken) {
                        localStorage.removeItem('token');
                        document.cookie = 'access_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Lax';
                    }
                    currentUser = null;
                }
            } catch (error) {
                console.error('Error loading current user:', error);
                // If there's an error, continue as unauthenticated
                currentUser = null;
            }
        }

        function updateNavigation() {
            const navbarNav = document.getElementById('navbarNav');
            const authButtons = document.getElementById('authButtons');
            const dashboardButtonSection = document.getElementById('dashboardButtonSection');
            
            if (currentUser) {
                // User is logged in
                navbarNav.innerHTML = `
                    <a class="nav-link" href="/dashboard">数据仓库</a>
                    ${currentUser.is_admin ? '<a class="nav-link" href="/admin">Admin Panel</a>' : ''}
                    <div class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <span id="currentUserEmail">${currentUser.email}</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li><a class="dropdown-item" href="#" onclick="logout()">Logout</a></li>
                        </ul>
                    </div>
                `;

                authButtons.innerHTML = '';
                dashboardButtonSection.style.display = 'block';
            } else {
                // User is not logged in
                navbarNav.innerHTML = `
                    <a class="nav-link" href="/login">Login</a>
                    <a class="nav-link" href="/register">Register</a>
                `;

                authButtons.innerHTML = `
                    <div class="d-flex gap-3">
                        <a href="/login" class="btn btn-primary btn-lg px-4" id="loginBtn">登录</a>
                        <a href="/register" class="btn btn-outline-primary btn-lg px-4" id="registerBtn">注册</a>
                    </div>
                `;
                dashboardButtonSection.style.display = 'none';
            }
        }

        function logout() {
            localStorage.removeItem('token');
            // Clear the cookie as well
            document.cookie = 'access_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Strict';
            window.location.reload();
        }

        async function loadDvcConfig() {
            try {
                const response = await fetch('/api/config');
                if (response.ok) {
                    const config = await response.json();
                    const dvcRemoteUrlElement = document.getElementById('dvcRemoteUrl');
                    if (dvcRemoteUrlElement) {
                        dvcRemoteUrlElement.textContent = config.dvc_remote_url;
                    }
                } else {
                    console.error('Failed to load DVC config');
                    const dvcRemoteUrlElement = document.getElementById('dvcRemoteUrl');
                    if (dvcRemoteUrlElement) {
                        dvcRemoteUrlElement.textContent = '配置加载失败';
                    }
                }
            } catch (error) {
                console.error('Error loading DVC config:', error);
                const dvcRemoteUrlElement = document.getElementById('dvcRemoteUrl');
                if (dvcRemoteUrlElement) {
                    dvcRemoteUrlElement.textContent = '配置加载失败';
                }
            }
        }

        // Initialize the page
        Promise.all([
            loadCurrentUser(),
            loadDvcConfig()
        ]).then(() => {
            updateNavigation();
        }).catch(error => {
            console.error('Error in page initialization:', error);
            updateNavigation();
        });
    </script>
